<template>
  <avue-form :option="option"
             v-model="form"
             @tab-click="handleTabClick"
             @submit="handleSubmit"></avue-form>
</template>

<script>
import { getUserInfo, update } from '@/api/system/user';
import func from '@/utils/func';
import { validatenull } from '@/utils/validate';
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      option: {
        column: [{
          label: '头像',
          type: 'upload',
          listType: 'picture-img',
          propsHttp: {
            res: 'data',
            url: 'link'
          },
          canvasOption: {
            text: 'blade', ratio: 0.1
          },
          action: '/api/civil-resource/oss/endpoint/put-file',
          tip: '只能上传jpg/png用户头像，且不超过500kb',
          span: 8,
          row: true,
          prop: 'avatar'
        }, {
          label: '姓名',
          span: 8,
          row: true,
          prop: 'name'
        },
          {
            label: '用户名',
            span: 8,
            row: true, prop: 'realName',
            disabled: 'disabled',
            rules: [
              { required: true, message: '请输入用户名', trigger: 'blur' }
            ]
          },
          {
            label: '手机号',
            span: 8, row: true,
            prop: 'phone'
          },
          {
            label: '邮箱',
            prop: 'email',
            span: 8,
            row: true
          }
        ]
      },
      form: {}
    };
  },
  created() {
    this.handleWitch();
  },
  methods: {
    ...mapActions(['GetUserInfo']),
    handleSubmit(form, done) {
      update(form).then(res => {
        if (res.data.success) {
          this.$message({
            type: 'success',
            message: '修改信息成功!'
          });

          //  刷新用户信息
          this.GetUserInfo().then(data => {
            console.log('用户信息获取成功:', data);
          }).catch(error => {
            console.error('用户信息获取失败:', error);
          });
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          });
        }
        done();
      }, error => {
        window.console.log(error);
        done();
      });
    },
    handleWitch() {
      getUserInfo().then(res => {
        const user = res.data.data;
        this.form = {
          id: user.id,
          avatar: user.avatar,
          name: user.name,
          realName: user.realName,
          phone: user.phone,
          email: user.email
        };
      });
    },
    handleTabClick(tabs) {
      console.log('tabsIndex：' + tabs.index);
      if (validatenull(tabs.index)) {
        return;
      }
      this.index = func.toInt(tabs.index, 0);
      this.handleWitch();
    }
  }
};
</script>
